import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import {
  Modal,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Collapse,
  DatePicker,
  Upload,
  PageHeader,
  Divider,
  message,
  Table,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { formatFile } from '@/pages/Common/common';
import EventInfo from './EventInfo';
import { codes, Status, EventType, NoticeMode } from './utils';
import { formatCodeVal } from '@/pages/Common/common';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const Panel = Collapse.Panel;

@connect(({ events, loading, common, component }) => ({
  events,
  loading: loading.effects['events/eventReceiverList'],
  dictObject: common.dictObject,
  searchValue: component.searchValue,
}))
@Form.create()
export default class ETCDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkId: '',
      activeKey: ['1', '2'],
      releaseRuleList: [],
    };
  }
  componentDidMount() {
    const { dispatch, dictObject, checkId } = this.props;
    this.getReleaseRuleList();
    this.setState({
      checkId: checkId,
    });
  }
  //规则选择列表：
  getReleaseRuleList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'events/selectReleaseRuleList',
      payload: { pageSize: 500 },
      callback: res => {
        this.setState({
          releaseRuleList: res || [],
        });
      },
    });
  };

  callback = key => {
    // console.log(key);
    this.setState({
      activeKey: key,
    });
  };

  onRef = ref => {
    this.child = ref;
  };

  render() {
    const { activeKey, releaseRuleList } = this.state;
    const {
      checkId,
      form: { getFieldDecorator },
      events: { eventsDetails, eventReceiverList },
      isMobile,
      loading,
      visible,
      searchValue,
    } = this.props;
    const details = eventsDetails[checkId] || {};
    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
    const InfoParams = {
      id: checkId,
      type: 'details',
      loading,
      noticeMode: details ? details.noticeMode : '',
      // addType,
      // showDetail: this.showDetail,
      // change: this.handleStandardTableChange,
      handleCancel: this.abnormalInfoModalCancel,
    };
    const accountName =
      details && details.senderId ? searchValue[details.senderId].accountName : '';

    const eventType = details ? formatCodeVal(EventType, details.eventType) : '';
    const noticeMode = details ? formatCodeVal(NoticeMode, details.noticeMode) : '';
    const beActive = details ? formatCodeVal(Status, details.beActive) : '';
    const ruleId = details
      ? formatCodeVal(releaseRuleList, details.ruleId, { id: 'id', name: 'name' })
      : '';
    const contentRule = details
      ? formatCodeVal(releaseRuleList, details.ruleId, { id: 'id', name: 'content' })
      : '';

    const fields = [
      { key: 'eventCode', name: '事件代码' },
      { key: beActive, name: '状态', isConst: true },
      { key: 'eventName', name: '事件名称' },
      { key: eventType, name: '事件类型', isConst: true },
      { key: noticeMode, name: '通知方式', isConst: true },
      { key: accountName, name: '发送方', isConst: true },
      { key: details.beUseRule ? '是' : '否', name: '是否使用规则', isConst: true },
      { key: ruleId, name: '规则', isConst: true },
      //   { key: 'content', name: '模板内容', isRow: true },
      { key: 'remarks', name: '备注', isRow: true },
    ];
    if (details.beUseRule) {
      fields.splice(8, 0, { key: contentRule, name: '规则内容', isConst: true, isRow: true });
    } else {
      fields.splice(8, 0, { key: 'content', name: '模板内容', isRow: true });
    }

    return (
      <div className={styles.CollapseDetails}>
        <Collapse activeKey={activeKey} onChange={key => this.callback(key)} bordered={false}>
          <Panel header="基础信息" key="1" className={styles.customPanelStyle}>
            <DetailsList isMobile={isMobile} detilsData={{ fields: fields, value: details }} />
          </Panel>
          <Panel header="接收方信息" key="2" className={styles.customPanelStyle}>
            <EventInfo
              {...InfoParams}
              visible={visible}
              data={eventReceiverList}
              onRef={this.onRef}
              // getSelectedRows={this.getSelectedRowsPay}
            />
          </Panel>
        </Collapse>
      </div>
    );
  }
}
